<template>
  <el-dropdown @command="handleCommand" ref="dropdown1" :trigger="trigger">
    <span class="el-dropdown-link"><slot name="title"></slot></span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(title, index) of dropdownData"
          :command="title.value ? title.value : title.tip"
          :key="index"
          :divided="index === dropdownData.length - 1"
          :disabled="disabledfun(title.value ? title.value : title.tip)"
        >
          {{ title.tip }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { TipValue } from '@/interfaces/DropDown'
const emit = defineEmits(['changeDropdown'])

interface DropdownType {
  dropdownData: Array<TipValue>
  trigger?: string
  disabledfun?: <T>(val: T) => boolean
}
// 默认值
withDefaults(defineProps<DropdownType>(), {
  trigger: 'hover',
  disabledfun: () => false,
})
const handleCommand = (command: string | number) => {
  emit('changeDropdown', command)
}
</script>
<style lang="scss"></style>
